<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(49, 118, 250, 1.0)"></QSNavbar>
		<view class="header">
			<view class="item">
				<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="33.5vw">
				</u--image>
				<view class="detail">
					<view class="detail-1 flex-align">
						<view class="tag">个人赛</view>
						<view>英雄联盟总决赛</view>
					</view>
					<view class="detail-2">
						开赛时间：7月1日-7月1日
					</view>
					<view class="detail-3 flex-align">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9fd7a29f6b8ebf611ac78c59b6f6af9b9144a385.png">
						</image>
						<text>大连体育馆第一用词</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="tab-box">
				<u-tabs @click="changeTab" :list="tabList" lineWidth="50"
					:activeStyle="{color:'rgb(47,117,250)',fontWeight:700}"></u-tabs>
			</view>
			<view class="con">
				<!-- <view class="con-1" v-show="tabActive === 0">
					<view class="btn-list flex-align">
						<view class="btn">预赛第一轮</view>
						<view class="btn">预赛第二轮</view>
					</view>
					<view class="table">
						<view class="table-head tr flex-align">
							<view class="td">序号</view>
							<view class="td">姓名</view>
							<view class="td">年龄</view>
							<view class="td">性别</view>
							<view class="td">赛道</view>
							<view class="td">号码簿</view>
						</view>
						<view class="table-con">
							<view class="tr tr-con" v-for="item in 15" :key="item">
								<view class="td">1</view>
								<view class="td flex-align">
									<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
										width="40rpx" height="40rpx"></u--image>
									<text class="name">无事可</text>
								</view>
								<view class="td">28</view>
								<view class="td">女</view>
								<view class="td">5</view>
								<view class="td">0081</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="con-3" v-show="tabActive === 0">
					<view class="btn-list flex-align">
						<view class="btn">常规赛第一轮</view>
						<view class="btn">常规赛第二轮</view>
					</view>
					<view class="event-list">
						<view class="event-item" @click="href">
							<view class="top flex-between">
								<view class="top-1">
									<image mode="aspectFit"
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012543701432005.png">
									</image>
									<text>罗珊机器人</text>
								</view>
								<!-- <view class="top-2 flex-align">
									<text>/</text>
									<text>-</text>
									<text>/</text>
								</view> -->
								<!-- <view class="top-3 flex-align">
									<text>96</text>
									<view class="tag">live</view>
									<text>88</text>
								</view> -->
								<view class="top-4 flex-align">
									<text>96</text>
									<view>-</view>
									<text>88</text>
								</view>
								<view class="top-1">
									<image
										src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16507012545061182362.png">
									</image>
									<text>布鲁克林篮网</text>
								</view>
							</view>
							<view class="bottom flex-between">
								<view class="bottom-1 active">
									未开始
								</view>
								<view class="bottom-2">
									2021/12/15 12:00
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="con-2" v-show="tabActive === 1">
					<view class="btn-list flex-align">
						<view class="btn">预赛第一轮</view>
						<view class="btn">预赛第二轮</view>
					</view>
					<view class="table">
						<view class="table-head tr flex-align">
							<view class="td">序号</view>
							<view class="td">姓名</view>
							<view class="td">年龄</view>
							<view class="td">性别</view>
							<view class="td">赛道</view>
							<view class="td">号码簿</view>
						</view>
						<view class="table-con">
							<view class="tr active tr-con" v-for="item in 1" :key="item">
								<view class="td">1</view>
								<view class="td flex-align">
									<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
										width="40rpx" height="40rpx"></u--image>
									<text class="name">无事可</text>
								</view>
								<view class="td">28</view>
								<view class="td">女</view>
								<view class="td">5</view>
								<view class="td">0081</view>
							</view>
						</view>
						<view class="results">
							成绩：38.57s
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '我的赛包',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabActive: 0,
				tabList: [{
						name: '我的赛程'
					},
					{
						name: '我的成绩'
					}
				],
			}
		},
		methods: {
			changeTab(data) {
				this.tabActive = data.index
			},
			href(){
				uni.navigateTo({
					url:'/pages/personal/my-event/event-record/event-record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e97b04390cc0b2a1f3830807ac38b0ac8014ee59.png");
		background-size: 100% auto;
		padding-bottom: 30rpx;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		background-color: rgb(249, 249, 249);

		.header {
			padding: 30rpx 30rpx;

			.item {
				margin-bottom: 30rpx;
				border-radius: 5rpx;
				overflow: hidden;

				.detail {
					background-color: #ffffff;
					padding: 20rpx;

					.detail-1 {
						color: #333333;
						font-size: 28rpx;
						font-weight: 500;

						.tag {
							color: #ffffff;
							font-size: 22rpx;
							font-weight: 500;
							white-space: nowrap;
							padding: 3rpx 5rpx;
							margin-right: 10rpx;
							background-color: #3076fa;
							border-radius: 5rpx;
						}
					}

					.detail-2 {
						margin-top: 17rpx;
						color: #bebebe;
						font-size: 22rpx;
						font-weight: 500;
					}

					.detail-3 {
						color: #999999;
						font-size: 22rpx;
						margin-top: 20rpx;

						image {
							width: 27rpx;
							height: 31rpx;
							margin-right: 13rpx;
						}
					}
				}
			}

		}

		.main {
			flex: 1;
			background-color: white;
			margin: 0 30rpx;

			.tab-box {
				border-bottom: solid 2rpx rgb(229, 229, 229);

				/deep/ .u-tabs__wrapper__nav__item {
					flex: 1;
				}
			}

			.con {
				.btn-list {
					padding: 6rpx 10rpx 10rpx;

					.btn {
						padding: 15rpx 15rpx;
						color: rgb(255, 254, 254);
						font-size: 26rpx;
						font-weight: 700;
						white-space: nowrap;
						background-color: rgb(47, 117, 250);
						border-radius: 10rpx;

						&+.btn {
							margin-left: 21rpx;
							color: rgb(47, 117, 250);
							background-color: rgba(47, 117, 250, 0.2);
						}
					}
				}

				.table {
					.table-head {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						padding: 19rpx 16rpx 21rpx 29rpx;
						font-weight: 700;
						background-color: rgb(243, 243, 243);
					}

					.active {
						background-color: rgba(128, 194, 105, 0.3);
					}

					.tr-con {
						display: flex;
						padding: 13rpx 22rpx 9rpx 43rpx;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 20rpx;

						.name {
							margin-left: 10rpx;
						}
					}

					.tr {
						.td:nth-of-type(1) {
							width: 10%;
						}

						.td:nth-of-type(2) {
							width: 30%;
							text-align: center;
						}

						.td:nth-of-type(3) {
							width: 16%;
						}

						.td:nth-of-type(4) {
							width: 15%;
						}

						.td:nth-of-type(5) {
							width: 15%;
						}

						.td:nth-of-type(6) {
							flex: 1;
							text-align: right;
						}
					}
				}

				.con-2 {
					.results {
						margin-left: 31rpx;
						margin-top: 29rpx;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.con-3 {
					.event-item {
						background-color: rgb(255, 255, 255);
						box-shadow: -2.44rpx 5.48rpx 26.68rpx 2.32rpx rgba(0, 0, 0, 0.06);
						margin-bottom: 30rpx;
						.top {
							padding: 17rpx 33rpx 27rpx;

							.top-1 {
								display: flex;
								flex-direction: column;
								align-items: center;
								color: rgb(51, 51, 51);
								font-size: 22rpx;
								font-weight: 700;

								image {
									width: 75rpx;
									height: 75rpx;
								}
							}

							.top-2 {
								color: rgb(153, 153, 153);
								font-size: 28rpx;
								font-weight: 700;

								text+text {
									margin-left: 17px;
								}
							}

							.top-3 {
								text {
									color: rgb(51, 51, 51);
									font-size: 28rpx;
									font-weight: 700;

									&:last-of-type {
										margin-left: 17rpx;
										color: rgb(153, 153, 153);
									}
								}

								.tag {
									color: rgb(255, 255, 255);
									padding: 2rpx 5rpx;
									font-size: 22rpx;
									font-weight: 700;
									background-color: rgb(255, 65, 5);
								}
							}

							.top-4 {
								text {
									color: rgb(51, 51, 51);
									font-size: 28rpx;
									font-weight: 700;

									&:last-of-type {
										margin-left: 17rpx;
										color: rgb(153, 153, 153);
									}
								}

								view {
									margin: 0px 36rpx;
									color: rgb(51, 51, 51);
									font-size: 22rpx;
								}
							}
						}

						.bottom {
							padding: 20rpx 20rpx 14rpx 31rpx;
							color: rgb(153, 153, 153);
							font-size: 22rpx;
							border-top: solid 6rpx rgb(239, 239, 239);

							.bottom-1 {
								font-size: 22rpx;
							}

							.active {
								color: rgb(255, 65, 5);
							}

							.bottom-2 {}

						}
					}
				}
			}

		}
	}
</style>
